<template>
  <div>
    <!-- <h3>专辑</h3> -->
    <div v-for="item in tableData" v-loading="loading">
      <img :src="item.picUrl" alt="" class="img" />
      <el-table :data="item.songData" key="" class="songs" @row-dblclick="dblclick">
        <el-table-column label="歌曲">
          <template #default="scope">
            <span> {{ scope.row.name }} </span>
            <!-- <span v-show="scope.row.survival === 0" style="color: red"> (无音源)</span> -->
            <span v-show="scope.row.survival === 4" style="color: red">
              (需要购买专辑)</span
            >
            <span v-show="scope.row.survival === 1" style="color: red"> (VIP)</span>
            <img
              src="@/static/img/mv.svg"
              alt=""
              v-show="scope.row.mv !== 0"
              style="width: 20px; position: relative; top: 5px; left: 5px"
              @click="toMVPlayPage(scope.row.mv)"
            />
          </template>
        </el-table-column>

        <el-table-column prop="playTime"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "@/stores/storage";
import { getSingerAlbun, getSingerAlbunContent, getSongUrl } from "@/service/songs.js";
import { getSongtime } from "@/utils/practicalFun";
import router from "../../router";

export default defineComponent({
  mounted() {
    this.getSingerAlbunFun();
  },
  setup() {
    let store = storage();
    const { singerId, singerAlbum } = storeToRefs(store);
    let tableData = ref([]);
    const loading = ref(true);

    function getSingerAlbunFun() {
      if (singerId.value)
        getSingerAlbun(singerId.value)
          .then(async (res) => {
            if (res.status === 200) {
              let data = res.data.hotAlbums;

              for (let i = 0; i < data.length; i++) {
                tableData.value[i] = {};
                tableData.value[i].name = data[i].name;
                tableData.value[i].id = data[i].id;
                tableData.value[i].picUrl = data[i].picUrl;
                let songData = ref([]);
                await getSingerAlbunContent(tableData.value[i].id).then((res) => {
                  if (res.status === 200) {
                    let data = res.data.songs;
                    for (let i = 0; i < data.length; i++) {
                      songData.value[i] = {};
                      songData.value[i].name = data[i].name;
                      songData.value[i].id = data[i].id;
                      songData.value[i].picUrl = data[i].al.picUrl;
                      songData.value[i].playTime = getSongtime(data[i].dt);
                      songData.value[i].survival = data[i].fee;
                      songData.value[i].mv = data[i].mv;
                    }
                  }
                });

                tableData.value[i].songData = songData.value;
              }
              loading.value = false;
            } else {
              ElMessage("请勿在此页刷新，回到主页重新尝试");
            }
          })
          .catch((err) => {
            if (err) ElMessage("网络错误,请重新尝试");
          });
    }
    function toMVPlayPage(item) {
      store.setMVId(item.vid);
      router.push({
        path: "/mvplay",
      });
    }
    async function dblclick(row) {
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          songUrl = res.data.data[0].url;
        })
        .catch((err) => {
          if (err) ElMessage("获取错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    return {
      tableData,
      getSingerAlbunFun,
      dblclick,
      toMVPlayPage,
      loading,
    };
  },
});
</script>

<style scoped>
.img {
  width: 200px;
  transform: scale(0.9);
  border-radius: 10px;
}
.songs {
  width: 790px;
  height: 200px;
  float: right;
}
</style>
